import type { ReactElement } from 'react';
import React, { useState } from 'react';
import { Select, Form, Button, Input, Modal, TreeSelect, Tooltip } from 'antd';
import request from '@/utils/request';
import { PlusOutlined } from '@ant-design/icons';
import Categories from '@/pages/admin/categories';
import { useIntl } from 'umi';
export interface CategoryProps {
  layout: string | ReactElement;
  width?: number;
  cRef?: any;
  name?: any;
  label?: any;
  required?: boolean;
  rules?: any;
  placeholder?: any;
  cateEditDisable?: boolean;
  isTreeSelect?: boolean;
  callback?: (item: any) => void;
}
const CategoryComponent: React.FC<CategoryProps> = (props: CategoryProps) => {
  const [dataSource, setDataSource] = useState<any[]>([]);
  const [visible, setVisible] = useState<boolean>(false);
  const intl = useIntl();
  const refreshData = () => {
    const act = props.isTreeSelect ? 'GetTreeDataAsync' : 'GetTreeListAsync';
    request('/api/services/app/Category/' + act, {
      method: 'GET',
      params: { layout: props.layout },
    }).then((response) => {
      if (response) {
        if (response.success) {
          setDataSource(response.result);
        }
      }
    });
  };
  const switchModal = () => {
    setVisible(!visible);
    refreshData();
  };
  const onChange = (e: any) => {
    if (props.callback) {
      const data = dataSource.filter((o) => o.categoryIndex == e)[0];
      props.callback(data);
    }
  };
  React.useEffect(() => {
    const act = props.isTreeSelect ? 'GetTreeDataAsync' : 'GetTreeListAsync';
    request('/api/services/app/Category/' + act, {
      method: 'GET',
      params: { layout: props.layout },
    }).then((response) => {
      if (response) {
        if (response.success) {
          setDataSource(response.result);
        }
      }
    });
  }, []);
  return (
    <>
      <Form.Item label={props.label} style={{ marginBottom: 0 }} required={props.required}>
        <Input.Group compact>
          <Form.Item name={props.name} rules={props.rules}>
            {!props.isTreeSelect ? (
              <Select
                placeholder={props.placeholder}
                style={{ width: props.width }}
                onChange={(e: any) => onChange(e)}
              >
                {dataSource?.map((item: any) => {
                  return (
                    <Select.Option value={item.categoryIndex} key={item.id}>
                      {item.categoryName}
                    </Select.Option>
                  );
                })}
              </Select>
            ) : (
              <TreeSelect
                style={{ width: props.width }}
                treeNodeLabelProp="title"
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                treeData={dataSource}
                treeDefaultExpandAll
              />
            )}
          </Form.Item>
          <Form.Item>
            <Button
              icon={<PlusOutlined />}
              onClick={switchModal}
              disabled={props.cateEditDisable}
            />
          </Form.Item>
        </Input.Group>
      </Form.Item>
      <Modal      
        title={intl.formatMessage({id: 'menu.admin.dictmanage'})}
        visible={visible}
        destroyOnClose={true}
        onCancel={switchModal}
        footer={false}
      >
        <Categories layout={props.layout} size="small" />
      </Modal>
    </>
  );
};
export default CategoryComponent;
